import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { Badge, Button, Form, Input, Modal, Table } from 'antd';
import { useState } from 'react';
import styles from './index.less';

interface interConfigsProp {
  productId: string;
}
interface AuthenticationProp {
  productId: string;
  dataSource: any;
  configInfo?: {
    username: string;
    password: string;
  };
}
interface TopicConfigurationProp {
  topicData: any;
}

const Authentication: React.FC<AuthenticationProp> = ({
  productId,
  dataSource,
  configInfo,
}) => {
  const columns = [
    {
      title: '类型',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '地址',
      render: (record: any) => <Badge status="success" text={record.address} />,
      key: 'address',
    },
  ];
  const [form] = Form.useForm();
  const { confirm } = Modal;
  const [visible, setVisible] = useState(false);

  const defaultMqttForm = {
    username: `IOT_${productId}`,
    password: 'yq88888888',
  };
  const [isReinstall, setIsReinstall] = useState(
    configInfo?.username && configInfo?.password ? true : false,
  ); //是否重置
  const [mqttForm] = useState(
    isReinstall ? { ...configInfo } : { ...defaultMqttForm },
  );

  const initialValues = {
    username: `IOT_${productId}`,
    password: mqttForm.password,
  };

  // let navigate = useNavigate();
  const handlePassword = () => {
    setVisible(!visible);
  };
  const onFinish = (value: any) => {
    confirm({
      title: '确定',
      content: '确定保存嘛?',
      onOk() {
        console.log(value, mqttForm);
        setIsReinstall(true);
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  return (
    <div>
      <section className={styles.linkInfo}>
        <h1>连接信息</h1>
        <Table dataSource={dataSource} columns={columns} pagination={false} />
      </section>
      <section className={styles.configInfo}>
        <h1>MQTT认证配置</h1>
        <div className={styles.mqttForm}>
          <Form
            form={form}
            layout="vertical"
            initialValues={initialValues}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: '用户名不能为空' }]}
            >
              <Input disabled={isReinstall} placeholder="请输入用户名" />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '密码不能为空' }]}
            >
              <Input
                suffix={
                  <div onClick={handlePassword}>
                    {visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />}
                  </div>
                }
                className={
                  visible ? styles.pwdInputDiscNone : styles.pwdInputDisc
                }
                id="pwd"
                // onChange={handleChange}
                // value={visible ? mqttForm.password : falsePassword}
                disabled={isReinstall}
                placeholder="请输入密码"
              />
              <input type="password" placeholder="静安寺大家" />
            </Form.Item>
            {isReinstall ? (
              <Button type="primary" onClick={() => setIsReinstall(false)}>
                重新设置
              </Button>
            ) : (
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  保存
                </Button>
              </Form.Item>
            )}
          </Form>
        </div>
      </section>
    </div>
  );
};
const TopicConfiguration: React.FC<TopicConfigurationProp> = ({
  topicData,
}) => {
  console.log(topicData);

  // const columns = [
  //   {}
  // ]

  return <h1>123</h1>;
};

const interConfigs: React.FC<interConfigsProp> = ({ productId }) => {
  const id = productId ? productId : '8F687FA7';
  const dataSource = [
    {
      key: '1',
      name: 'tcp',
      address: 'mqtt://mqtt.yqyjy.tech:1883',
    },
    {
      key: '2',
      name: 'ssl',
      address: 'mqtts://mqtt.yqyjy.tech:8883',
    },
    {
      key: '3',
      name: 'ws',
      address: 'ws://mqtt.yqyjy.tech:8083',
    },
    {
      key: '4',
      name: 'wss',
      address: 'wss://mqtt.yqyjy.tech:8084',
    },
  ];
  const topicData = [
    {
      key: '1',
      name: '属性上报',
      topic: [
        {
          topic: '/iot/${product_id}/${device_id}/thing/property/post_reply',
          action: 'publish',
          description: '设备属性上报',
        },
        {
          topic: '/iot/${product_id}/${device_id}/thing/property/post_reply',
          action: 'subscribe',
          description: '云端响应属性上报',
        },
      ],
    },
    {
      key: '2',
      name: '属性设置',
      topic: [
        {
          topic: '/iot/${product_id}/${device_id}/thing/property/set',
          action: 'subscribe',
          description: '设备属性设置',
        },
      ],
    },
    {
      key: '3',
      name: '事件上报',
      topic: [
        {
          topic: '/iot/${product_id}/${device_id}/thing/property/set',
          action: 'subscribe',
          description: '设备属性设置',
        },
        {
          topic: '/iot/${product_id}/${device_id}/thing/property/set',
          action: 'subscribe',
          description: '设备属性设置',
        },
        {
          topic: '/iot/${product_id}/${device_id}/thing/property/set',
          action: 'all',
          description: '设备属性设置',
        },
      ],
    },
  ];

  return (
    <div className={styles.box}>
      <div className={styles.left}>
        <Authentication
          productId={id}
          dataSource={dataSource}
          configInfo={{ username: '', password: '' }}
        />
      </div>
      <div className={styles.right}>
        <TopicConfiguration topicData={topicData} />
      </div>
    </div>
  );
};

export default interConfigs;
